<template>
  <view class="container">
	  <view class="card">
	  	<uni-section title="上传文件" type="square" titleFontSize="22px"/>
			<uni-file-picker 
				v-model="imageValue" 
			
			
				@select="select" 
				@progress="progress" 
				@success="success" 
				@fail="fail" 
			/>
	  </view>
    <!-- 基本信息部分 -->
    <view class="card">
		<uni-section title="船舶基本信息" type="square" titleFontSize="22px"/>
          <view class="form-item">
            <text class="label">船舶名称</text>
            <input v-model="ship.name" placeholder="请输入船舶名称" class="input" />
          </view>
          <view class="form-item">
            <text class="label">船舶代码</text>
            <input v-model="ship.code" placeholder="请输入船舶代码" class="input" />
          </view>
          <view class="form-item">
            <text class="label">船舶航次</text>
            <input v-model="ship.voyage" placeholder="请输入船舶航次" class="input" />
          </view>
		  <view class="form-item">
		    <text class="label">驾驶台</text>
		    <input v-model="ship.jiashitai" placeholder="请输入驾驶台位置" class="input" />
		  </view>
          <view class="form-item">
            <text class="label">长</text>
            <input v-model="ship.length" placeholder="请输入船舶长" class="input" />
          </view>
          <view class="form-item">
            <text class="label">宽</text>
            <input v-model="ship.width" placeholder="请输入船舶宽" class="input" />
          </view>
          <view class="form-item">
            <text class="label">形深</text>
            <input v-model="ship.depth" placeholder="请输入船舶形深" class="input" />
          </view>
          <view class="form-item">
            <text class="label">配载要求</text>
            <input v-model="ship.loadRequirement" placeholder="请输入配载要求" class="input" />
          </view>
        </view>

    <!-- 锁垫情况 -->
    <view class="card">
		<uni-section title="锁垫情况" type="square" titleFontSize="22px"/>
      <view class="form-item">
        <text class="label">描述</text>
        <textarea v-model="lockPad.description" placeholder="请输入描述" class="textarea"></textarea>
      </view>
      <view class="form-item">
        <text class="label">隐患</text>
        <textarea v-model="lockPad.hazard" placeholder="请输入隐患" class="textarea"></textarea>
      </view>
      <view class="form-item">
        <text class="label">措施</text>
        <textarea v-model="lockPad.measure" placeholder="请输入措施" class="textarea"></textarea>
      </view>
    </view>
	
	
	<view class="card">
		<uni-section title="甲板情况" type="square" titleFontSize="22px"/>
	  <view class="form-item">
	    <text class="label">描述</text>
	    <textarea v-model="deck.description" placeholder="请输入描述" class="textarea"></textarea>
	  </view>
	  <view class="form-item">
	    <text class="label">隐患</text>
	    <textarea v-model="deck.hazard" placeholder="请输入隐患" class="textarea"></textarea>
	  </view>
	  <view class="form-item">
	    <text class="label">措施</text>
	    <textarea v-model="deck.measure" placeholder="请输入措施" class="textarea"></textarea>
	  </view>
	</view>
	<view class="card">
		<uni-section title="垫子框情况" type="square" titleFontSize="22px"/>
	  <view class="form-item">
	    <text class="label">描述</text>
	    <textarea v-model="gearbox.description" placeholder="请输入描述" class="textarea"></textarea>
	  </view>
	  <view class="form-item">
	    <text class="label">隐患</text>
	    <textarea v-model="gearbox.hazard" placeholder="请输入隐患" class="textarea"></textarea>
	  </view>
	  <view class="form-item">
	    <text class="label">措施</text>
	    <textarea v-model="gearbox.measure" placeholder="请输入措施" class="textarea"></textarea>
	  </view>
	</view>
	<view class="card">
		<uni-section title="加固平台情况" type="square" titleFontSize="22px"/>
	  <view class="form-item">
	    <text class="label">描述</text>
	    <textarea v-model="jiagupingtai.description" placeholder="请输入描述" class="textarea"></textarea>
	  </view>
	  <view class="form-item">
	    <text class="label">隐患</text>
	    <textarea v-model="jiagupingtai.hazard" placeholder="请输入隐患" class="textarea"></textarea>
	  </view>
	  <view class="form-item">
	    <text class="label">措施</text>
	    <textarea v-model="jiagupingtai.measure" placeholder="请输入措施" class="textarea"></textarea>
	  </view>
	</view>
	<view class="card">
		<uni-section title="船梯情况" type="square" titleFontSize="22px"/>
	  <view class="form-item">
	    <text class="label">描述</text>
	    <textarea v-model="ladder.description" placeholder="请输入描述" class="textarea"></textarea>
	  </view>
	  <view class="form-item">
	    <text class="label">隐患</text>
	    <textarea v-model="ladder.hazard" placeholder="请输入隐患" class="textarea"></textarea>
	  </view>
	  <view class="form-item">
	    <text class="label">措施</text>
	    <textarea v-model="ladder.measure" placeholder="请输入措施" class="textarea"></textarea>
	  </view>
	</view>
	<view class="card">
		<uni-section title="贝位情况" type="square" titleFontSize="22px"/>
	  <view class="form-item">
	    <text class="label">描述</text>
	    <textarea v-model="bay.description" placeholder="请输入描述" class="textarea"></textarea>
	  </view>
	  <view class="form-item">
	    <text class="label">隐患</text>
	    <textarea v-model="bay.hazard" placeholder="请输入隐患" class="textarea"></textarea>
	  </view>
	  <view class="form-item">
	    <text class="label">措施</text>
	    <textarea v-model="bay.measure" placeholder="请输入措施" class="textarea"></textarea>
	  </view>
	</view>
	<view class="card">
		<uni-section title="舱内情况" type="square" titleFontSize="22px"/>
	  <view class="form-item">
	    <text class="label">描述</text>
	    <textarea v-model="cabin.description" placeholder="请输入描述" class="textarea"></textarea>
	  </view>
	  <view class="form-item">
	    <text class="label">隐患</text>
	    <textarea v-model="cabin.hazard" placeholder="请输入隐患" class="textarea"></textarea>
	  </view>
	  <view class="form-item">
	    <text class="label">措施</text>
	    <textarea v-model="cabin.measure" placeholder="请输入措施" class="textarea"></textarea>
	  </view>
	</view>
	
    <!-- 加固绑扎 -->
    <view class="card">
	  <uni-section title="加固绑扎" type="square" titleFontSize="22px"/>
      <view class="form-item">
        <text class="label">描述</text>
        <textarea v-model="reinforce.description" placeholder="请输入描述" class="textarea"></textarea>
      </view>
      <view class="form-item">
        <text class="label">隐患</text>
        <textarea v-model="reinforce.hazard" placeholder="请输入隐患" class="textarea"></textarea>
      </view>
      <view class="form-item">
        <text class="label">措施</text>
        <textarea v-model="reinforce.measure" placeholder="请输入措施" class="textarea"></textarea>
      </view>
    </view>

    <!-- 导槽情况 -->
    <view class="card">
	  <uni-section title="导槽情况" type="square" titleFontSize="22px"/>
      <view class="form-item">
        <text class="label">描述</text>
        <textarea v-model="guideSlot.description" placeholder="请输入描述" class="textarea"></textarea>
      </view>
      <view class="form-item">
        <text class="label">隐患</text>
        <textarea v-model="guideSlot.hazard" placeholder="请输入隐患" class="textarea"></textarea>
      </view>
      <view class="form-item">
        <text class="label">措施</text>
        <textarea v-model="guideSlot.measure" placeholder="请输入措施" class="textarea"></textarea>
      </view>
    </view>

    <!-- 舱盖情况 -->
    <view class="card">
	  <uni-section title="舱盖情况" type="square" titleFontSize="22px"/>
      <view class="form-item">
        <text class="label">描述</text>
        <textarea v-model="hatchCover.description" placeholder="请输入描述" class="textarea"></textarea>
      </view>
      <view class="form-item">
        <text class="label">隐患</text>
        <textarea v-model="hatchCover.hazard" placeholder="请输入隐患" class="textarea"></textarea>
      </view>
      <view class="form-item">
        <text class="label">措施</text>
        <textarea v-model="hatchCover.measure" placeholder="请输入措施" class="textarea"></textarea>
      </view>
    </view>

    <!-- 其他情况 -->
    <view class="card">
	  <uni-section title="其他情况" type="square" titleFontSize="22px"/>
      <view class="form-item">
        <text class="label">描述</text>
        <textarea v-model="other.description" placeholder="请输入描述" class="textarea"></textarea>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="form-item">
      <button @click="submitForm" class="button">提交</button>
    </view>
  </view>
</template>


<script>
import common from  "../common/js/common.js";
export default {
  data() {
    return {
		imageValue:[],
		userInfo: {},
	  ship_id: '-1',
      ship: {
        name: '',
        code: '',
        voyage: '',
        length: '',
        width: '',
        depth: '',
        loadRequirement: '',
		jiashitai:'',
      },
	  
	  deck: {
	    description: '',
	    hazard: '',
	    measure: ''
	  },
	  gearbox: {
	    description: '',
	    hazard: '',
	    measure: ''
	  },
	  jiagupingtai: {
	    description: '',
	    hazard: '',
	    measure: ''
	  },
	  ladder: {
	    description: '',
	    hazard: '',
	    measure: ''
	  },
	  bay: {
	    description: '',
	    hazard: '',
	    measure: ''
	  },
	  cabin: {
	    description: '',
	    hazard: '',
	    measure: ''
	  },
	  
	  
      lockPad: {
        description: '',
        hazard: '',
        measure: ''
      },
      reinforce: {
        description: '',
        hazard: '',
        measure: ''
      },
      guideSlot: {
        description: '',
        hazard: '',
        measure: ''
      },
      hatchCover: {
        description: '',
        hazard: '',
        measure: ''
      },
      other: {
        description: ''
      }
    };
  },
  methods: {
	  // 获取上传状态
	select(e){
		console.log('选择文件：',e)
	},
	// 获取上传进度
	progress(e){
		console.log('上传进度：',e)
	},
	
	// 上传成功
	success(e){
		console.log('上传成功')
	},
	
	// 上传失败
	fail(e){
		console.log('上传失败：',e)
	},
    submitForm() {
		// 检查用户是否登录
		const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
		if (!userInfo) {
		  // 如果没有用户信息，跳转到登录页面
		  uni.redirectTo({
		    url: '/pages/login'
		  });
		}else{
				  this.userInfo = userInfo;
		}
		console.log(userInfo)
      // 处理表单提交逻辑
      // console.log('提交的船舶信息:', this.ship);
      // console.log('锁垫情况:', this.lockPad);
      // console.log('加固绑扎:', this.reinforce);
      // console.log('导槽情况:', this.guideSlot);
      // console.log('舱盖情况:', this.hatchCover);
      // console.log('其他情况:', this.other);
      // 此处可以进行网络请求提交表单数据
	  const query = {
	  	'action': "add",
		
		'ship_id': this.ship_id,
		
	  	'ship': this.ship,
	  	'deck': this.deck,
	  	'gearbox': this.gearbox,
	  	'jiagupingtai': this.jiagupingtai,
	  	'ladder': this.ladder,
		'bay': this.bay,
		'cabin': this.cabin,
		'lockPad': this.lockPad,
		'reinforce': this.reinforce,
		'guideSlot': this.guideSlot,
		'hatchCover': this.hatchCover,
		'other': this.other,
		
		'firm': userInfo.firm,
		'realname': userInfo.realname,
	  }
	  console.log(query)
	  uni.request({
	  		url: common.baseurl + '/api/ship/info',
	  		method:'POST',
	  		data: query,
	  	}).then(data=>{
	  		if(undefined != data[1].data.errCode){
	  			uni.showToast({
	  			          title: data[1].data.errMsg,
	  			          icon: 'none',
	  			        });
	  		}else{
	  			console.info(data[1].data)
	  			  uni.switchTab({
	  				url: '/pages/ship_baidu',
					success(res) {
						console.log('跳转成功')
						let data={
							reload:1
						}
						let page = getCurrentPages().pop();
						//data可不传值
						page.onLoad(data);
					}
	  			  });
	  		}
	  
	  	}).catch(()=>{
	    
	  	})
    },
	created() {
	  // 检查用户是否登录
	  const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
	  if (!userInfo) {
	    // 如果没有用户信息，跳转到登录页面
	    uni.redirectTo({
	      url: '/pages/login'
	    });
	  }else{
		  this.userInfo = userInfo;
	  }
	}
  },
  onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
    if(option.ship_id != undefined){
		// alert(option.ship_id)
		this.ship_id = option.ship_id 
		if(this.ship_id != '-1'){
			var Url = common.baseurl + '/api/ship/info?ship_id=' + this.ship_id
			uni.request({
					url: Url,
					method:'GET',
				}).then(data=>{
					if(undefined != data[1].data.errCode){
						uni.showToast({
						          title: data[1].data.errMsg,
						          icon: 'none',
						        });
					}else{
						console.info(data[1].data)
						// this.ships = data[1].data,
						this.ship_id= data[1].data.ship_info._id
						this.ship= data[1].data.ship_info.ship
						this.lockPad= data[1].data.ship_info.lockPad
						
						
						this.deck=data[1].data.ship_info.deck
						this.gearbox=data[1].data.ship_info.gearbox
						this.jiagupingtai=data[1].data.ship_info.jiagupingtai
						this.ladder= data[1].data.ship_info.ladder
						this.bay=data[1].data.ship_info.bay
						this.cabin= data[1].data.ship_info.cabin
						this.reinforce=data[1].data.ship_info.reinforce 
						this.guideSlot=data[1].data.ship_info.guideSlot 
						this.hatchCover=data[1].data.ship_info.hatchCover
						this.other= data[1].data.ship_info.other
					}
			
				}).catch(()=>{
			  
				})
		}
	}
	// alert(this.ship_id)
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f4f4f4;
}

.card {
  margin-bottom: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.card-header {
  font-size: 26px;
  font-weight: bold;
  color: #333;
  
}

.form-item {
  margin-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
}

.label {
  display: block;
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
}

.textarea {
  width: 100%;
  padding: 12px;  /* 增加内边距，使输入框更宽 */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  box-sizing: border-box; /* 确保内外边距正确计算 */
}

.textarea:focus {
  outline: none;
  border-color: #007aff; /* 聚焦时改变边框颜色 */
}

.textarea {
  height: 100px;
  resize: none;
}

.submit-button {
  display: flex;
  justify-content: center;
}

.button {
  background-color: #007AFF;
  color: white;
  border-radius: 5px;
  font-size: 16px;
  border: none;
}

.input{
	width: 90%;
	padding: 12px;  /* 增加内边距，使输入框更宽 */
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 14px;
}

.button:active {
  background-color: #005bb5;
}
</style>
